<template>
	<view class="content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff" />

		<view class="content_main" style="padding: 10px;">
			<!-- 顶部卡片 -->
			<view class="summary-section">
				<view v-for="item in topCellInfo" :key="item.titleName" class="summary-card">
					<text class="summary-title">{{ item.titleName }}</text>
					<view class="summary-grid">
						<view v-for="row in item.nood" :key="row.keyName" class="summary-item">
							<text class="label">{{ row.keyName }}</text>
							<text class="value">{{ row.keyValue }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 图表 1：未收款前6 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left"><text>未收款前6</text></view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData1" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表 2：未付款前6 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left"><text>未付款前6</text></view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表 3：开票分析 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left"><text>开票分析</text></view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" lineWidth="30" :current="tabsCurrent3" :list="realCondition3"
							:activeStyle="{ color: '#51d0d0', fontWeight: '500', transform: 'scale(1.05)' }"
							@change="changeTopTabs3" />
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="line" :chartData="chartData3" :ChartsStyle="ChartsStyle" />
				</view>
			</view>

			<!-- 图表 4：收付款分析 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left"><text>收付款分析</text></view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData4" :ChartsStyle="ChartsStyle" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue';
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit';
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore } from '@/store';
	const mainStore = useMainStore();
	const inventoryStore = useInventoryStore();
	import mUCharts from '../../components/m-uCharts/m-uCharts.vue';

	interface TopCellRow {
		keyName : string;
		keyValue : string | number;
	}

	interface TopCellItem {
		titleName : string;
		nood : TopCellRow[];
	}

	interface ChartData {
		[key : string] : any;
	}


	const basicInfo = ref({ APFunName: " " });
	const topCellInfo = ref<TopCellItem[]>([]);
	const ChartsStyle = ref({ width: "100%", height: "240px" });

	const chartData1 = ref<ChartData>({});
	const chartData2 = ref<ChartData>({});
	const chartData3 = ref<ChartData>({});
	const chartData4 = ref<ChartData>({});
	const chartDataArr3 = ref<ChartData[]>([]);

	const tabsCurrent3 = ref(0);
	const realCondition3 = ref([
		{ name: "销售发票" },
		{ name: "采购发票" },
	]);

	/** 获取数据 */
	const getDataInfo = () => {
		request({
			config: {
			},
			url: 'plat_caiwu',
			method: 'POST',
			data: {},
			success: (ret : any) => {
				if (ret.status === 200) {
					const data = ret.data;

					// 顶部卡片数据
					const theData = dataBack(data.ds[0], "期初收款(万元)", "应收金额", "QCYSmoney", "未收金额", "WSKMoney");
					const theData1 = dataBack(data.ds1[0], "期初付款(万元)", "应付金额", "QCYSmoney", "未付金额", "WSKMoney");
					const theData2 = dataBack(data.ds2[0], "销售发票", "应开数量", "FQty", "未开数量", "WKPNum");
					const theData3 = dataBack(data.ds3[0], "采购发票", "应开数量", "FQty", "未开数量", "WKPNum");
					const theData4 = dataBack(data.ds4[0], "收付款(万元)", "未收款", "SKMoney", "未付款", "FKMoney");

					topCellInfo.value = [theData, theData1, theData2, theData3, theData4];

					// 饼图 - 未收款
					const chartData1List = (data.ds5 || [])
						.filter((i : any) => i.ClientName)
						.map((i : any) => ({
							name: i.ClientName,
							value: +i.Rate || 0,
							type: "pie",
						}));
					chartData1.value = { ds5: chartData1List };

					// 饼图 - 未付款
					const chartData2List = (data.ds6 || [])
						.filter((i : any) => i.SupplyName)
						.map((i : any) => ({
							name: i.SupplyName,
							value: +i.Rate || 0,
							type: "pie",
						}));
					chartData2.value = { ds6: chartData2List };

					// 折线图 - 开票分析
					const allData_ds7 = transformData(data.ds7, "line", "month", "FQty", "WKNum");
					const allData_ds8 = transformData(data.ds8, "line", "month", "FQty", "WKNum");
					chartDataArr3.value = [allData_ds7, allData_ds8];
					chartData3.value = { ds7: chartDataArr3.value[tabsCurrent3.value] };

					// 柱状图 - 收付款分析
					const chartData4List = transformData(data.ds9, "column", "month", "FKMoney", "SKMoney", {
						aText: "应付金额",
						bText: "应收金额",
					});
					chartData4.value = { ds9: chartData4List };
				}
			}
		});
	};

	/** 数据包装方法 */
	const dataBack = (
		data : any,
		keyTitle : string,
		keyName1 : string,
		key1 : string,
		keyName2 : string,
		key2 : string
	) : TopCellItem => {
		const obj1 = { keyName: keyName1, keyValue: data[key1] };
		const obj2 = { keyName: keyName2, keyValue: data[key2] };
		return {
			titleName: keyTitle,
			nood: [obj1, obj2],
		};
	};

	/** 通用转换方法 */
	const transformData = (
		data : any[],
		type = "line",
		dateKey = "month",
		ckQtyKey = "FQty",
		rkQtyKey = "Qty",
		leng = { aText: "应开数量", bText: "未开数量" }
	) => {
		if (!Array.isArray(data)) return [];
		return data.flatMap((item) => [
			{ seriesName: leng.aText, name: item[dateKey], value: item[ckQtyKey] || 0, type },
			{ seriesName: leng.bText, name: item[dateKey], value: item[rkQtyKey] || 0, type },
		]);
	};

	/** 切换tab */
	const changeTopTabs3 = (data : { index : number }) => {
		tabsCurrent3.value = data.index;
		chartData3.value = { ds7: chartDataArr3.value[tabsCurrent3.value] };
	};

	onMounted(() => {
		basicInfo.value = uni.$utils.deepClone(inventoryStore.Menu);
		getDataInfo();
	});
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f2f2;
	}

	::v-deep.u-cell__body {
		padding: 4px 15px !important;
	}

	.topCellCard {
		display: flex !important;
		flex-wrap: wrap !important;
		background-color: rgba(139, 207, 141, 0.6) !important;
		zoom: 0.8 !important;

		&_childCell {
			background-color: #f3f3f3;
			border-radius: 4px;
			margin-bottom: 4px;
		}
	}
	
	.summary-section {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px;
		background-color: #f6f9fc;
	}
	
	.summary-card {
		flex: 1 1 calc(50% - 8px);
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		padding: 8px 10px;
	
		.summary-title {
			font-weight: 600;
			font-size: 13px;
			margin-bottom: 6px;
			color: #333;
			display: block;
			text-align: center;
		}
	
		.summary-grid {
			display: flex;
			flex-direction: column;
			gap: 4px;
	
			.summary-item {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
	
				.label {
					color: #666;
				}
	
				.value {
					color: #1a1a1a;
					font-weight: 500;
				}
			}
		}
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				font-size: 16px;
				font-weight: 500;
			}
		}
	}
</style>